{extend name="Base" /}
{block name="title"}{$title}{/block}
{block name="body"}
{load href="/js/backend/lodash.min.js"}
<style>
	.layui-inline {
		min-width: 500px;
	}
</style>
<fieldset class="layui-elem-field layui-field-title">
	<legend>{$name}</legend>
</fieldset>

<div class="toolbar">
	<div class="layui-inline">
		<input type="text" name="search" placeholder="请输入检索依据，可以是UID，用户名，邮箱，注册IP或UUID" autocomplete="off" class="layui-input">
	</div>
	<button class="layui-btn search" data-type="reload">检索</button>
</div>

<table id="users" lay-filter="users" class="layui-hide"></table>

<script type="text/html" id="bar">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>

<script type="text/html" id="isadmin">
	{{#  if(d.isadmin > 1){ }}
	<div style="color: #ff0000">{{d.name}}</div>
	{{#  } else { }}
	<div>{{d.name}}</div>
	{{#  } }}
</script>

<script id="check" type="text/html">
	<form class="layui-form layui-form-pane">
		<div class="layui-form-item">
			<!--<label class="layui-form-label">选择用户组</label>-->
			<div class="layui-input-inline">
				<select name="selectgroup">
					<%# layui.each(d, function(i, item){ %>
					<%# if(item.id === item.select) { %>
					<option value="<% item.id %>" selected><% item.name %></option>
					<%# } else { %>
					<option value="<% item.id %>"><% item.name %></option>
					<%# }}); %>
				</select>
				<%# if(d.length === 0){ %>无数据<%# } %>
			</div>
			<button class="layui-btn layui-btn-normal submit" lay-submit>提交</button>
		</div>
	</form>
</script>

<script>
	layui.use(['layer', 'table', 'laytpl', 'form'], function () {
		var layer = layui.layer;
		var table = layui.table;
		var laytpl = layui.laytpl;
		var form = layui.form;

		table.render({
			id: "search",
			elem: '#users',
			page: true,
			height: 685,
			even: true,
			method: 'POST',
			url: "/backend/users/doSearch",
			where: {type: 2},
			cols: [[
				{field: 'uid', title: 'UID', width: 60, fixed: true},
				{field: 'username', title: '用户名', sort: true, width: 120, fixed: true},
				{field: 'name', title: '用户组', sort: true, width: 150, fixed: true, templet: '#isadmin', style: 'cursor: pointer', event: 'isadmin'},
				{field: 'email', title: '邮箱', sort: true, width: 80},
				{field: 'class', title: '等级', sort: true, width: 80},
				{field: 'price', title: '积分', sort: true, width: 80},
				{field: 'hr', title: 'H&R', sort: true, width: 80},
				{field: 'addtime', title: '注册时间', sort: true, width: 120},
				{field: 'ip', title: '注册IP', sort: true, width: 80},
				{field: 'lasttime', title: '最后访问', sort: true, width: 120},
				{field: 'seed', title: '做种数', sort: true, width: 80},
				{field: 'leech', title: '下载数', sort: true, width: 80},
				{field: 'complete', title: '完成数', sort: true, width: 80},
				{field: 'longinv', title: '永久邀请', sort: true, width: 120},
				{field: 'shortinv', title: '临时邀请', sort: true, width: 120},

				{title: '操作', width: 80, align: 'center', toolbar: '#bar', fixed: 'right'}
			]]
		});

		var active = {
			reload: function () {
				var $search = $("input[name=search]");
				table.reload('search', {
					where: {
						search: $search.val()
					}
				});
				$search.val("");
			}
		};

		$('.toolbar .search').on('click', function () {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});

		//监听工具条
		table.on('tool(users)', function (obj) {
			var data = obj.data;
			if (obj.event === 'detail') {
				layer.open({
					type: 1,
					title: false,
					closeBtn: false,
					shadeClose: true,
					area: '300px;',
					shade: 0.8,
					id: 'alert',
					btn: '关闭',
					moveType: 1,
					content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">' +
					"UID：" + data.uid + "<br/>" +
					"用户名：" + data.username + "<br/>" +
					"用户组：" + data.name + "<br/>" +
					"邮箱：" + data.email + "<br/>" +
					"等级：" + data.class + "<br/>" +
					"积分：" + data.price + "<br/>" +
					"注册时间：" + data.addtime + "<br/>" +
					"注册IP：" + data.ip + "<br/>" +
					"最后访问：" + data.lasttime + "<br/>" +
					"做种数：" + data.seed + "<br/>" +
					"下载数：" + data.leech + "<br/>" +
					"完成数：" + data.complete + "<br/>" +
					'</div>'
				});
			} else if (obj.event === 'isadmin') {
				$.ajax({
					type: "POST",
					url: "/backend/system/getGroupList",
					cache: false,
					dataType: "json",
					data: {
						type: 0,
						forType: 1
					},
					success: function (e) {
						laytpl.config({
							open: '<%',
							close: '%>'
						});
						var index = layer.open({
							type: 1,
							title: '请选择 ' + data.username + ' 的用户组',
							closeBtn: 2,
							shade: 0.8,
							area: ['300px', '500px'],
							id: 'selectgroup',
							content: '<div class="layui-form layui-form-pane" style="padding:10px">' +
							'<div id="view"></div>' +
							'</div>'
						});
						var tmp = {};
						tmp.data = JSON.parse(JSON.stringify({id: data.isadmin, name: data.name, select: data.isadmin}));
						var vv = _.sortBy(_.unionBy(_.values(tmp), _.values(e.data), 'id'), function (item) {
							return item.id;
						});
						var getTpl = check.innerHTML, view = document.getElementById('view');
						laytpl(getTpl).render(vv, function (html) {
							view.innerHTML = html;
						});
						form.render('select');
						$(".submit").attr("lay-filter", "selectgroup").click(function () {
							layer.close(index);
							form.on('submit(selectgroup)', function (d) {
								var s = d.field;
								var uid = {uid: data.uid};
								s = Object.assign(s, uid);
								$.ajax({
									type: "POST",
									url: "/backend/system/assignUserGroup",
									cache: false,
									data: s,
									dataType: "json",
									success: function (e) {
										if (e.status === 1) {
											table.reload('search', {
												where: {
													type: 2
												}
											});
											layer.alert(e.message, {
												//成功图标
												icon: 1
											});
										} else if (e.status === 0) {
											layer.alert(e.message, {
												//失败图标
												icon: 2
											});
										} else {
											layer.alert("系统错误，请稍后重试", {
												//失败图标
												icon: 2
											});
										}
									}
								});
								return false;
							});
						});
						laytpl.config({
							open: '{{',
							close: '}}'
						});
					}
				});

			}
		});
	});

	function ajax_send(data, name, value) {
		$.ajax({
			type: "POST",
			url: "/backend/users/editUser",
			cache: false,
			data: {
				uid: data.uid,
				k: name,
				v: value
			},
			dataType: "json",
			success: function (e) {
				if (e.status === 1) {
					layer.alert(e.message, {
						//成功图标
						icon: 1
					});
				} else if (e.status === 0) {
					layer.alert(e.message, {
						//失败图标
						icon: 2
					});
				} else {
					layer.alert("系统错误，请稍后重试", {
						//失败图标
						icon: 2
					});
				}
			}
		});
	}

	function getSize(Byte) {
		var SizeByte = Byte;
		var SizeMsg = "";
		if (SizeByte < 1024) SizeMsg = (SizeByte) + " Byte";
		else if (SizeByte < 1048576) SizeMsg = (SizeByte / 1024) + " KB";
		else if (SizeByte > 1048576 && SizeByte < 1073741824) SizeMsg = (SizeByte / (1024 * 1024)) + " MB";
		else if (SizeByte > 1073741824 && SizeByte < 1099511627776) SizeMsg = (SizeByte / (1024 * 1024 * 1024)) + " GB";
		else if (SizeByte > 1099511627776 && SizeByte < 1125899906842624) SizeMsg = (SizeByte / (1024 * 1024 * 1024 * 1024)) + " PB";
		else if (SizeByte > 1125899906842624 && SizeByte < 1152921504606846976) SizeMsg = (SizeByte / (1024 * 1024 * 1024 * 1024 * 1024)) + " EB";
		return SizeMsg;
	}
</script>
{/block}